<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template>
  <el-form class="login-form" status-icon :rules="loginRules" ref="loginForm" :model="loginForm" label-width="0">
    <el-form-item prop="username">
      <el-input size="small" @keyup.enter.native="handleLogin" v-model="loginForm.username" auto-complete="off"
                placeholder="请输入用户名">
        <i slot="prefix" class="icon-yonghu"></i>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input size="small" @keyup.enter.native="handleLogin" :type="passwordType" v-model="loginForm.password"
                auto-complete="off" placeholder="请输入密码">
        <i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword"></i>
        <i slot="prefix" class="icon-mima"></i>
      </el-input>
    </el-form-item>
    <el-form-item prop="code">

      <Verify
              @success="verifySuccess"
              mode="pop"
              :captchaType="loginForm.captchaType"
              :imgSize="imgSize"
              ref="verify"
      ></Verify>


    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click.native.prevent="handleLogin" class="login-submit">登录
      </el-button>
    </el-form-item>
  </el-form>
</template>

  <script>
    import { hasMobile } from '@/framework-core/utils/util'
  import {
    mapGetters
  } from "vuex";

  import Verify from "@/framework-core/components/verifition/Verify.vue";

  export default {
    name: "userlogin",
    components: {
      Verify
    },
    data() {
      return {
        timeoutId: null,
        passwordType: "password",
        imgSize: {width:'400px',height:'200px'},
        loginForm: {
          username: "",
          password: "",
          code: "",
          captchaType: "block"
        },
        loginRules: {
          username: [{
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          }],
          password: [{
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }]
        }
      };
    },

    computed: {
      ...mapGetters(["tagWel", "website"])
    },
    created () {
      const params = this.$route.query
      this.loginForm.temptoken = params.temptoken;
      if( hasMobile()){
         this.imgSize = {width:'300px',height:'200px'};
      }
    },
    beforeDestroy() {
      // 组件销毁前清除timeout
      if (this.timeoutId) {
        clearTimeout(this.timeoutId);
      }
    },
    methods: {
      showPassword() {
        this.passwordType == "" ? (this.passwordType = "password") : (this.passwordType = "");
      },
      handleLogin() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.$refs.verify.show()

          }
        });
      },
      verifySuccess(params) {
        this.loginForm.code = params.captchaVerification;
        let $that = this;
        this.$store.dispatch("LoginByUsername", this.loginForm).then(() => {
          if ($that.$route.query.redirect) { //如果存在参数
            let redirect = $that.$route.query.redirect;

            if ($that.timeoutId) {
              clearTimeout($that.timeoutId);
            }
            $that.$router.push(redirect);//则跳转至进入登录页前的路由
          } else {
            $that.$router.push('/');//否则跳转至首页
          }
        }).catch((e) => {
          $that.$message.error(e)
                }
        );
      }


    }
  };
</script>

<style></style>
